<template>
  <div class="login">
    <van-nav-bar title="登录" left-arrow @click-left="$router.back()" />
    <van-form @submit="onSubmit">
      <van-field
        left-icon="phone"
        v-model="username"
        name="username"
        label="手机号"
        placeholder="手机号"
        :rules="[
          { required: true, message: '请输入手机号' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
        ]"
      />
      <van-field
        left-icon="todo-list"
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[
          { required: true, message: '请输入密码' },
          {
            validator: (e) => /^\w{6,12}$/.test(e),
            message: '密码格式为6-12位字母或数字',
          },
        ]"
      />

      <van-button class="log1" color="#4fc08d" block native-type="submit"
        >确定</van-button
      >
    </van-form>
    <router-link to="zhuce"> 没有账号？点击注册 </router-link>
    <router-link style="float: right" to="wjmm"> 忘记密码 </router-link>
  </div>
</template>

<script>
import { login } from "@/api/login";
export default {
  name: "Login",
  components: {},
  data() {
    return {
      // editingContact: {},
      username: "",
      password: "",
    };
  },
  Created() {},
  methods: {
    onSubmit(values) {
      // 数据检验成功
      console.log("submit", values);

      login(values).then((res) => {
        console.log(res);
        //信息存起来
        if (res.code == 0) {
          let { userInfo, token, uid, tokenExpired } = res;

          localStorage.setItem("token", token);
          localStorage.setItem("tokenExpired", tokenExpired);

          this.$store.dispatch("getuserInfo", token);
          // this.$store.commit("save", ["uid", uid]);
          // this.$store.commit("save", ["token", token]);
          // this.$store.commit("save", ["userInfo", userInfo]);
          // this.$store.commit("save", ["isLogin", true]);

          setTimeout((v) => {
            this.$router.push("my");
          }, 800);
        } else {
        }
      });
    },
  },
};
</script>

<style lang="less">
.van-tag--default {
  margin-left: 270px;
  bottom: 35px;
  color: #000;
  background-color: #ebecec;
}
.van-tag {
  line-height: 6vw;
}
.log1 {
  width: 300px;
  margin: 20px auto;
}
</style>
